<script setup lang="ts">
import { computed, inject, onMounted, ref, watch } from 'vue'
import { Sort } from '@element-plus/icons-vue'
import { ChooseScanType, scoutParamsType } from '@renderer/views/multiScanSeriesPage/helper/types'
import { useScanStore } from '@renderer/store/pinia/scan'
import { BaseScanSeries } from '@renderer/views/multiScanSeriesPage/types'
import { useSystemStore } from '@renderer/store/pinia/system'
import { useGlobalLoading } from '@renderer/utils/hooks/useGlobalLoading'

const { scanSeriesArr, activeScanSeries } = inject('multiSeries') as any

const scanStore = useScanStore()
const systemStore = useSystemStore()

watch(() => systemStore.lasePosition.current, (newVal) => {
  currentParams.value[radio1.value].value = newVal
})

const currentParams = computed(() => {
  const currentIndex = scanSeriesArr.findIndex(series => series.id === activeScanSeries.id)
  if (scanSeriesArr[currentIndex]) {
    return scanSeriesArr[currentIndex].params
  } else {
    return {}
  }
})

const handleScoutTypeChange = (val) => {
  const series = scanStore.scanSeriesInfo.getSeriesById(activeScanSeries.id)
  if (val.includes('+')) {
    series!.scoutCount = 2
  } else {
    series!.scoutCount = 1
  }
  scanStore.scanSeriesInfo.syncRelateScoutCountAfterChangeScoutParams((series as BaseScanSeries))
}

const toggleStartEnd = () => {
  const start = currentParams.value['start']
  const end = currentParams.value['end'];
  [start.value, end.value] = [end.value, start.value]
}

let radio1 = ref('start')

</script>

<template>
  <p class="mb-[20px]">请先打开激光灯</p>
  <el-form v-if="activeScanSeries.scanType ===ChooseScanType.scout" :model="currentParams" label-width="100"
           size="large" style="max-width: 600px;width: 400px;">
    <el-form-item label-width="40">
      <el-radio-group v-model="radio1" class="h-[120px] w-full mb-[20px]">
        <el-radio value="start" class="w-full flex">
          <label class="mr-[10px] w-[30px] inline-block">start</label>
          <el-input-number v-model="currentParams.start.value" class="!w-[300px]" disabled />
        </el-radio>

        <el-button text class="ml-[180px] mt-[5px] mb-[5px]" @click="toggleStartEnd">
          <el-icon size="30">
            <Sort />
          </el-icon>
        </el-button>

        <el-radio value="end" class="w-full">
          <label class="mr-[10px] w-[30px] inline-block">end</label>
          <el-input-number v-model="currentParams.end.value" class="!w-[300px]" disabled />
        </el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="kV">
      <el-select v-model="currentParams.kV.value">
        <el-option v-for="item in scoutParamsType.kV.values" :value="item" :label="item">
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="mA">
      <el-select v-model="currentParams.mA.value">
        <el-option v-for="item in scoutParamsType.mA.values" :value="item" :label="item">
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="select Type">
      <el-select v-model="currentParams.scoutType.value" @change="handleScoutTypeChange">
        <el-option v-for="item in scoutParamsType.scoutType.values" :value="item" :label="item"
        >
        </el-option>
      </el-select>
    </el-form-item>


  </el-form>
</template>

<style scoped>

</style>
